<template>
	<div class='project-purchased'>
		<el-form>
			<h2 class="center">用户购买记录</h2>
			<el-table
				class="purchase-records"
				max-height="600"
				stripe
				:data="orders"
				v-infinite-scroll="loadOrders"
				infinite-scroll-distance="20"
				:infinite-scroll-disabled="showAll"
				@row-click="orderModelData=$event"
			>
				<el-table-column type="index" />
				<el-table-column
					label="购买人"
					prop="contribPointOrder.user.nickname"
					align="center"
				/>
				<el-table-column
					label="购买附件"
					align="center"
					min-width="200"
				>
					<template slot-scope="scope">
						<div
							v-for="(file,index) in scope.row.contribPointOrder.orderResources"
							:key="index"
						>
							{{file.resource.name}}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					label="时间"
					width="100"
					prop="purchaseTime"
					align="center"
				/>
				<el-table-column
					label="花费"
					align="center"
				>
					<template slot-scope="scope">
						<div><strong>{{scope.row.contribPointOrder.chargedAhaCredit}}</strong>Aha币</div>
						<div><strong>{{scope.row.contribPointOrder.chargedAhaPoint}}</strong>Aha点</div>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
		<!-- 订单详细 -->
		<OrderDetail
			v-if="orderModelData"
			:order="orderModelData"
			@close="orderModelData=null"
		/>
	</div>
</template>

<script>
import { getOrders } from '@/api/order'

export default {
  props: {
    project: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      showAll: false,
      orders: [],
      orderModelData: null, // 订单详细
    }
  },
  methods: {
    /**
     * 加载订单信息
     */
    async loadOrders() {
      console.log(this.project, '===')
      const res = await getOrders({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        projectId: this.project.id,
      })

      console.log('已购信息:', res.data)
      this.orders = this.orders.concat(res.data.pageData.map(order => {
        order.purchaseTime = moment(order.purchaseTime).format('YYYY/MM/DD HH:mm:ss')
        order.contribPointOrder.createTime = moment(order.contribPointOrder.createTime).format('YYYY/MM/DD HH:mm:ss')
        order.contribPointOrder.payTime = moment(order.contribPointOrder.payTime).format('YYYY/MM/DD HH:mm:ss')
        return order
      }))

      if (this.orders.length < res.data.total) {
        this.pageNum++
        this.showAll = false
      } else {
        this.showAll = true
      }
    },
  }
}
</script>

<style lang='scss' scoped>
.project-purchased {
  grid-column: 1 / 3;
  white-space: pre-line;
}
</style>
